<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button class="btn1">获取a标签的href属性值</button>
<button class="btn2">获取img标签的src属性值</button>
<button class="btn3">获取div标签的class属性值</button>
<button class="btn4">获取input标签的value属性值</button>
<hr>
<a href="https://www.baidu.com">百度一下</a>
<img src="img/222.jpeg" alt="" style="width: 100px">
<div class="box">盒子对象</div>
<form action="" method="get">
    <label>
        用户名:<input type="text" name="username" value="">
    </label>
</form>

<script>
    let btn1 = document.querySelector('.btn1');
    let btn2 = document.querySelector('.btn2');
    let btn3 = document.querySelector('.btn3');
    let btn4 = document.querySelector('.btn4');
    btn1.onclick = function () {
        let a = document.querySelector('a');
        // console.log("a的href的值：", a.href);
        a.href = "https://www.360.cn";
        a.innerText = "360";
    }
    btn2.onclick = function () {
        let imgEle = document.querySelector('img');
        // console.log("img的src的值：", imgEle.src);
        imgEle.src = "img/111.jpeg";
    }
    btn3.onclick = function () {
        let divEle = document.querySelector('div');
        // console.log("div的class的值：", divEle.className);
        divEle.className = "content";
    }
    btn4.onclick = function () {
        let inputEle = document.querySelector('input');
        // console.log("input的value的值：", inputEle.value);
        inputEle.value = "张三";
    }

</script>
</body>
</html>
